<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!doctype html>
<html lang="zh-CN">
<head>
<meta content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" name="viewport" />
<meta charset="utf-8">
<title><c:choose><c:when test="${incrConfig.title != null && incrConfig.title != '' }">${incrConfig.title }</c:when><c:otherwise>月月存活动</c:otherwise></c:choose></title>
<style>
*{
	margin: 0;
	padding: 0;
}
img{
	box-sizing: border-box;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	border: 0;
}
li{
	list-style: none;
	text-align: left;
	padding-left: 5px;
}
a{
	text-decoration: none;
	color: #FFF;
}
.fl{
	float: left;
}
.fr{
	float: right;
}
.clearfix:before,.clearfix:after {
	display: table;
	content: " ";
	line-height: 0;
	width: 100%;
	visibility: hidden;
}

.clearfix:after {
	clear: both;
}
.btn-select{
	position: absolute;
	font-size: 12px;
	z-index: 3;
}
.btn-default{
	display: block;
	text-align: left;
	font-style:normal;
	background: #FFF;
	box-sizing: border-box;
	border: 1px solid #FFF;
	border-radius: 6px 0 0 6px;
	padding-left: 5px;
}
.btn-drop,.btn-get,.btn-href{
	position: absolute;
	display: block;
}
.mask,.mask1{
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: rgba(255,255,255,0);
	display: none;
	z-index: 2;
}
.mask1{
	background: rgba(0,0,0,0.6);
	z-index: 101;
}
.alert{
	position: absolute;
	width: 80%;
	left: 5%;
	padding: 5% 5% 10%;
	top: 35%;
	background: #FFF;
	border-radius: 8px;
	z-index: 102;
	display: none;
}
.btn-sure{
	width: 33%;
	padding: 3% 0;
	text-align: center;
	border-radius: 12px;
}
.btn-use{
	width: 60%;
	padding: 3% 0;
	text-align: center;
	border-radius: 12px;
	margin: 20px auto;
	display: none;
}
.alert-joined{
	position: absolute;
	z-index: 10;
	background: rgba(0,0,0,0.6);
	top: 0px;
	height: 100%;
	width: 100%;
	display: none;
}
#alert-joined-box{
	width: 300px;
	height: 100px;
	background-color: white;
	line-height: 80px;
	text-align: center;
	border-radius: 5px;
	margin: 0px auto;
	margin-top: 200px;
}

</style>
</head>
<body>
<input type="hidden" id="device" value="${param.device }" />
<input type="hidden" id="app_token" value="${param.app_token }" />
<c:choose>
	<c:when test="${incrConfig != null && incrConfig != '' }">
		<div class="wrap" style="width: 100%;position: relative;">
			<img src="${incrConfig.backImg }" />
			<div class="btn-select">
				<c:if test="${incrConfig.incrList != null && fn:length(incrConfig.incrList) > 0 }">
					<cite class="btn-default">${incrConfig.incrList[0].desc }</cite>
				</c:if>
				<ul style="display: none;background: #FFF; border-radius: 5px 0px 0px 5px;">
					<c:forEach items="${incrConfig.incrList }" var="config">
						<li selectid="${config.selectId }" defid="${config.defId }">${config.desc }</li>
					</c:forEach>
				</ul>
				<input type="hidden" value="${incrConfig.incrList[0].selectId }" id="inputselect"/>
			</div>
			<div class="btn-drop" style="z-index:100;"></div>
			<div class="btn-get"></div>
			<a class="btn-href" href="/h5/financial_zone.htm?tab=zone&app_view=zone"></a>
			<div class="mask"></div>
			<div class="mask1"></div>
			<div class="alert" style="">
				<div style="text-align: center;color: #460808;">
					<h2 id="alert-title">确认领取</h2>
					<div style="margin: 20px 0;"><img src="${incrConfig.incrList[0].rateImg }" id="rate-img" style="width: 45%;" /></div>
					<div id="rate-txt">${incrConfig.incrList[0].rateTxt }</div>
				</div>
				<div class="clearfix" style="margin-top: 20px;" id="verify-area">
					<div class="fl btn-sure btn-close" style="margin-left: 10%;"><img src="${incrConfig.cancelImg }" style="height:39px;" /></div>
					<div class="fr btn-sure" id="btn-sure" style="margin-right: 10%;"><a href="javascript:void(0);"><img src="${incrConfig.sureImg }" style="height:39px;" /></a></div>
				</div>
				<div class="btn-use"><a href="/h5/financial_zone.htm?tab=zone&app_view=zone" style="display:inline-block; width: 100%;margin: -8px 0; line-height: 34px;"><img src="${incrConfig.useImg }" /></a></div>
			</div>
			<div class="alert-joined" style="display: none;">
				<div id="alert-joined-box">本月您已领取过</div>
			</div>
		</div>
	</c:when>
	<c:otherwise>
		<div style="text-align: center;">
			<img src="static/imgs/yemianbucunzai.png" style="width: 90%;" />
		</div>
		<div style="font-size: 20px; text-align: center;">该活动不存在，或已结束...</div>
	</c:otherwise>
</c:choose>

<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="activity.js"></script>
<script type="text/javascript">
$(function(){
	$(".alert-joined,#alert-joined-box").click(function(){
		$(".alert-joined").hide();
	});
	var location = window.location.href.split("?")[0];
	var _channel = '${param._channel}';
	Activity.ready($("#app_token").val(), location.substr(location.length-12, 8), "JOIN_INFO", {
		t:new Date()
	}, function(data){
		if(Activity.conditions.joined("001")){
				$(".btn-get").click(function() {
					$("#alert-joined-box").text("本月您已领取过");
					$(".alert-joined").show();
				}); 
		}else{
			$("#btn-sure").click(function(){
				Activity.join("001",{
					defid:$("#inputselect").attr("defid")?$("#inputselect").attr("defid"):"${incrConfig.incrList[0].defId }"
				}, function(jdata){
					if(jdata.code=="SUCCESS"){
						$("#verify-area").hide();
						$("#alert-title").text("领取成功");
						$(".btn-use").show();
					}else if(jdata.code=="token_error"){
						if(!$("#device").val()){
							console.log("h5 login");
							window.location.href="/h5/login.htm?tab=account&returnUrl="+window.location.href;
						}else if(_channel && _channel.toLowerCase().indexOf("appst") >= 0){
							console.log("ios login");
							window.location.href="monthly_invest_"+location.substr(location.length-12, 8)+".htm?app_view=login";
						} else {
							console.log("android login");
							window.location.href="/h5/my_account.htm?app_view=acc";
						}
					}else if(jdata.code=="HAS_NO_CHANGE"){
						$(".mask1,.alert").hide();
							$("#alert-joined-box").text("本月您已领取过");
						$(".alert-joined").show();
					}else if(jdata.code=="ACT_TIME_INVALID"){
						$(".mask1,.alert").hide();
						$("#alert-joined-box").text("活动未开始");
						$(".alert-joined").show();
					}else{
						console.log(JSON.stringify(jdata));
					}
				});
			});
			
			$(".btn-get").click(function() {
				var period = $("#inputselect").val();
				var incrList = '${incrConfig.incrList }';
				incrList = JSON.parse(incrList);
				if(incrList && incrList.length > 0) {
					for(var index in incrList){
						if(period == incrList[index].selectId) {
							$("#rate-img").attr("src", incrList[index].rateImg);
							$("#rate-txt").text(incrList[index].rateTxt);
						}
					}
				}
		 		$(".mask1,.alert").show();
			});
		}
	});
});

$(function(){
	jQuery.divselect = function(divselectid,inputselectid) {
		var inputselect = $(inputselectid);
		$(".btn-drop").click(function(){
			var ul = $(divselectid + " ul");
			if(ul.css("display")=="none"){
				ul.slideDown("fast");
			}else{
				ul.slideUp("fast");
			};
			$(".mask").show();
		});
		$(divselectid+" ul li").click(function(){
			var txt = $(this).text();
			$(divselectid+" cite").html(txt);
			var value = $(this).attr("selectid");
			inputselect.val(value);
			inputselect.attr("defid",$(this).attr("defid"));
			$(divselectid+" ul").hide();
			$(".mask").hide();
		});
		$(".mask").click(function(){
			$(".mask").hide();
			$(divselectid+" ul").hide();
		});
		$(".mask1").click(function(){
			$(".mask1, .alert").hide();
			window.location.reload();
		});
	};
	$(function(){
		$.divselect(".btn-select","#inputselect");
	});
	var ratio=$(window).width()/750;
	function rdist(num){
		return Math.floor(ratio*num) + "px";
	};
	$(".btn-select").css({
		width: rdist(376),
		left: rdist(102),
		top: rdist(629),
	});
	$(".btn-select li,.btn-default").css({
		height: rdist(55),
		lineHeight: rdist(55),
	});
	$(".btn-select .btn-default").css({
		height:rdist(55),
	});
	$(".btn-drop").css({
		width: rdist(429),
		height: rdist(55),
		left: rdist(102),
		top: rdist(629),
	});
	$(".btn-get").css({
		width: rdist(116),
		height: rdist(58),
		right: rdist(94),
		top: rdist(627),
	});
	$(".btn-href").css({
		width: rdist(270),
		height: rdist(63),
		left: rdist(248),
		top: rdist(791),
	});
	
	var alertHeight = $(".alert").height();
	$(".alert").css("margin-top","-"+(alertHeight/2)+"px")
	$(".btn-close").click(function(){
		$(".alert,.mask1").hide();
	})
	
	$("#btn-surexx").click(function() {
		var param = {
			t : new Date(),
			period : $("#inputselect").val(),
			app_token : $("#app_token").val()
		};
		var location = window.location.href.split("?")[0];
		var _channel = '${param._channel}';
		$.post("monthly_receive_rate_incr.htm", param, function(data){
			if(data.code=="SUCCESS") {
				$("#verify-area").hide();
				$("#alert-title").text("领取成功");
				$(".btn-use").show();
			} else if(data.code=="LOGIN_TIME_OUT") {
				if($("#device").val()) {
					window.location.href="monthly_invest_"+location.substr(location.length-12, 8)+".htm?app_view=login";
				} else {
					if("${param.from_h5}"=='true'){
						console.log("h5 login");
						window.location.href="/h5/login.htm?tab=account&returnUrl="+window.location.href;
					}else if(_channel && _channel.toLowerCase().indexOf("appst") >= 0){
						console.log("ios login");
						window.location.href="monthly_invest_"+location.substr(location.length-12, 8)+".htm?app_view=login";
					} else {
						console.log("android login");
						window.location.href="/h5/my_account.htm?app_view=acc";
					}
				}
			} else {
				$("#verify-area").hide();
				$(".btn-use").show();
				$("#alert-title").text("领取失败");
				$("#rate-txt").text(data.msg);
			}
		},"json");
	});
});
</script>
</body>
</html>